<template>
  <div class="home">
    <!-- <div>{{this.source}}</div>
    <div>{{this.store.price | priceFilter | textFilter}}</div>
    <button @click="onClick">点击</button>
    <input type="text" class="input" v-focus="isFocus"/>
    <Header title="Home标题111111">
      <template v-slot:name>
        <h2>111111</h2>
      </template>
      <template v-slot:id>
        <h2>222222</h2>
      </template>
      <template v-slot:scope="slotProps">
        <h1>{{slotProps.title}}</h1>
      </template>
    </Header> -->
    <el-table
    :data="tableData"
    style="width: 100%">
      <el-table-column
      label="姓名"
      prop="name"></el-table-column>
      <el-table-column
      label="年龄"
      prop="age"></el-table-column>
      <el-table-column
      label="手机号"
      prop="phone"></el-table-column>
      <el-table-column 
      label="操作">
        <template v-slot="props">
          <el-button type="primary" round @click="onClickpromaryButton(props)">主要按钮</el-button>
        </template>
      </el-table-column>
    </el-table> 
  </div>
</template>

<script>
// import Header from "../components/Header";

export default {
  name: 'Home',
  components:{
    // Header
  },
  data(){
    return{
      tableData:[
        {
          name:"1111",
          age:1,
          phone:18888888
        },
        {
          name:"1111",
          age:1,
          phone:18888888
        },
        {
          name:"1111",
          age:1,
          phone:18888888
        },
        {
          name:"1111",
          age:1,
          phone:18888888
        },
        {
          name:"1111",
          age:1,
          phone:18888888
        },
        {
          name:"1111",
          age:1,
          phone:18888888
        }
      ],
      isFocus:false,
      source:1,
      user:{
        name:"杨克强",
        age:10,
        sex:1,
        friends:{
          p:{
            name:"111"
          }
        }
      },
      store:{
        price:100.00
      }
    }
  },
  filters:{//文本过滤器
    priceFilter:function(value){
      return value+"元"
    },
    textFilter:function(value){
      return value+"1111"
    }
  },
  computed:{
    //组件的计算属性会默认触发
    //只有参与计算的data中属性发生改变，计算属性重新触发
    // result:function(){
    //   console.log("计算属性被触发")
    //   return this.source+1
    // },
    result:{
      get:function(){
        return this.source+1;
      },
      set:function(value){
        this.source  = value;
      }
    }

  },
  watch:{
    // source(newValue,oldValue){
    //   console.log('监听属性被触发')
    //   console.log(newValue);
    //   console.log(oldValue);
    // } 
    // source:"watchSource",
    source:{
      // handler:function(newValue,oldValue){
      //   console.log('监听属性被触发')
      //   console.log(newValue);
      //   console.log(oldValue);
      // }
      handler:"watchSource",
      // immediate:false
    },
    // user:{
    //   handler:function(){
    //     console.log("user属性被改变");
    //   },
    //   deep:true
    // }
    "user.friends.p.name":function(){
      console.log("user属性被改变");
    }
  },
  directives:{
    focus:{
      bind:function(el,binding){
        console.log("指令和元素绑定时调用");
        console.log(el);
        console.log(binding)
      },
      inserted:function(el,binding){
        if(binding.value){
          el.focus();
        }else{
          el.blur();
        }
      },
      update:function(el,binding){
        if(binding.value){
          el.focus();
        }else{
          el.blur();
        }
      },
      unbind:function(){

      }
    }
  },
  methods:{
    onClick(){
      this.user.friends.p.name = 20;
      this.isFocus  =  true;
      // console.log(this.user)
      // this.source = 10;
      // ++this.source;
      // console.log(this.source)
      // this.result =  10;
    },
    watchSource(newValue,old){
      console.log('监听属性被触发')
      console.log(newValue);
      console.log(old)
    },
    onClickpromaryButton(props){
      console.log(props)
    }
  }
}
</script>
